<template>
  <view class="container">
    <!-- 状态栏占位 -->
    <view :style="{ height: statusBarHeight + 'px' }"></view>
    
    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-left" @click="goBack">
        <uni-icons type="left" size="20" color="#333"></uni-icons>
      </view>
      <view class="nav-title">意见反馈</view>
      <view class="nav-right"></view>
    </view>

    <!-- 反馈表单 -->
    <view class="feedback-form">
      <view class="form-section">
        <view class="section-title">
          <uni-icons type="edit" size="20" color="#FF8C42"></uni-icons>
          <text>反馈类型</text>
        </view>
        <view class="feedback-types">
          <view 
            class="type-item" 
            :class="{ active: selectedType === type.value }"
            v-for="type in feedbackTypes" 
            :key="type.value"
            @click="selectType(type.value)"
          >
            <text>{{ type.label }}</text>
          </view>
        </view>
      </view>

      <view class="form-section">
        <view class="section-title">
          <uni-icons type="chat" size="20" color="#FF8C42"></uni-icons>
          <text>详细描述</text>
        </view>
        <textarea 
          class="feedback-textarea"
          v-model="feedbackContent"
          placeholder="请详细描述您遇到的问题或建议，我们会认真对待每一条反馈..."
          maxlength="500"
        ></textarea>
        <view class="char-count">{{ feedbackContent.length }}/500</view>
      </view>

      <view class="form-section">
        <view class="section-title">
          <uni-icons type="image" size="20" color="#FF8C42"></uni-icons>
          <text>上传图片</text>
          <text class="optional">(可选)</text>
        </view>
        <view class="image-upload">
          <view 
            class="image-item" 
            v-for="(image, index) in uploadedImages" 
            :key="index"
          >
            <image :src="image" mode="aspectFill"></image>
            <view class="delete-btn" @click="deleteImage(index)">
              <uni-icons type="close" size="16" color="#fff"></uni-icons>
            </view>
          </view>
          <view class="upload-btn" @click="chooseImage" v-if="uploadedImages.length < 3">
            <uni-icons type="plus" size="30" color="#999"></uni-icons>
            <text>添加图片</text>
          </view>
        </view>
        <view class="upload-tip">最多上传3张图片，支持jpg、png格式</view>
      </view>

      <view class="form-section">
        <view class="section-title">
          <uni-icons type="person" size="20" color="#FF8C42"></uni-icons>
          <text>联系方式</text>
        </view>
        <input 
          class="contact-input"
          v-model="contactInfo"
          placeholder="请留下您的手机号或邮箱，方便我们回复您"
        />
      </view>
    </view>

    <!-- 历史反馈 -->
    <view class="history-section">
      <view class="section-title">
        <uni-icons type="list" size="20" color="#FF8C42"></uni-icons>
        <text>历史反馈</text>
      </view>
      <view class="history-list">
        <view class="history-item" v-for="item in feedbackHistory" :key="item.id">
          <view class="history-header">
            <view class="history-type">{{ item.type }}</view>
            <view class="history-status" :class="item.status">{{ item.statusText }}</view>
          </view>
          <view class="history-content">{{ item.content }}</view>
          <view class="history-time">{{ item.time }}</view>
          <view class="history-reply" v-if="item.reply">
            <view class="reply-label">客服回复：</view>
            <view class="reply-content">{{ item.reply }}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 提交按钮 -->
    <view class="submit-section">
      <button class="submit-btn" @click="submitFeedback" :disabled="!canSubmit">
        提交反馈
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';

const statusBarHeight = ref(0);
const selectedType = ref('');
const feedbackContent = ref('');
const contactInfo = ref('');
const uploadedImages = ref([]);

const feedbackTypes = [
  { label: '功能建议', value: 'suggestion' },
  { label: '问题反馈', value: 'bug' },
  { label: '服务投诉', value: 'complaint' },
  { label: '其他', value: 'other' }
];

const feedbackHistory = ref([
  {
    id: 1,
    type: '功能建议',
    content: '希望能增加夜间模式功能',
    time: '2024-09-15 14:30',
    status: 'replied',
    statusText: '已回复',
    reply: '感谢您的建议，我们已将此功能加入开发计划中，预计下个版本上线。'
  },
  {
    id: 2,
    type: '问题反馈',
    content: '支付页面偶尔会卡顿',
    time: '2024-09-10 09:20',
    status: 'processing',
    statusText: '处理中',
    reply: ''
  },
  {
    id: 3,
    type: '服务投诉',
    content: '客服响应时间较慢',
    time: '2024-09-05 16:45',
    status: 'replied',
    statusText: '已回复',
    reply: '非常抱歉给您带来不便，我们已优化客服流程，响应时间将大幅缩短。'
  }
]);

// 计算是否可以提交
const canSubmit = computed(() => {
  return selectedType.value && feedbackContent.value.trim().length > 0;
});

// 获取状态栏高度
const getStatusBarHeight = () => {
  try {
    const systemInfo = uni.getSystemInfoSync();
    statusBarHeight.value = systemInfo.statusBarHeight || 0;
  } catch (e) {
    statusBarHeight.value = 0;
  }
};

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 选择反馈类型
const selectType = (type) => {
  selectedType.value = type;
};

// 选择图片
const chooseImage = () => {
  uni.chooseImage({
    count: 3 - uploadedImages.value.length,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      uploadedImages.value.push(...res.tempFilePaths);
    }
  });
};

// 删除图片
const deleteImage = (index) => {
  uploadedImages.value.splice(index, 1);
};

// 提交反馈
const submitFeedback = () => {
  if (!canSubmit.value) {
    uni.showToast({
      title: '请完善反馈信息',
      icon: 'none'
    });
    return;
  }

  uni.showLoading({
    title: '提交中...'
  });

  // 模拟提交
  setTimeout(() => {
    uni.hideLoading();
    uni.showToast({
      title: '反馈提交成功',
      icon: 'success'
    });
    
    // 清空表单
    selectedType.value = '';
    feedbackContent.value = '';
    contactInfo.value = '';
    uploadedImages.value = [];
  }, 2000);
};

onMounted(() => {
  getStatusBarHeight();
});
</script>

<style>
.container {
  background-color: #FFF9F2;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #FFE6CC;
}

.nav-left, .nav-right {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.feedback-form, .history-section {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.form-section {
  margin-bottom: 30rpx;
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.section-title text {
  margin-left: 10rpx;
}

.optional {
  font-size: 22rpx !important;
  color: #999 !important;
  font-weight: normal !important;
  margin-left: 10rpx !important;
}

.feedback-types {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
}

.type-item {
  padding: 15rpx 25rpx;
  border: 2rpx solid #FFE6CC;
  border-radius: 25rpx;
  font-size: 24rpx;
  color: #666;
  transition: all 0.3s ease;
}

.type-item.active {
  background-color: #FF8C42;
  border-color: #FF8C42;
  color: #fff;
}

.feedback-textarea {
  width: 100%;
  min-height: 200rpx;
  padding: 20rpx;
  border: 2rpx solid #FFE6CC;
  border-radius: 12rpx;
  font-size: 26rpx;
  line-height: 1.6;
  resize: none;
}

.char-count {
  text-align: right;
  font-size: 22rpx;
  color: #999;
  margin-top: 10rpx;
}

.image-upload {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
}

.image-item {
  width: 150rpx;
  height: 150rpx;
  position: relative;
  border-radius: 12rpx;
  overflow: hidden;
}

.image-item image {
  width: 100%;
  height: 100%;
}

.delete-btn {
  position: absolute;
  top: 5rpx;
  right: 5rpx;
  width: 30rpx;
  height: 30rpx;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 15rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-btn {
  width: 150rpx;
  height: 150rpx;
  border: 2rpx dashed #FFE6CC;
  border-radius: 12rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
}

.upload-btn text {
  font-size: 22rpx;
  margin-top: 10rpx;
}

.upload-tip {
  font-size: 22rpx;
  color: #999;
  margin-top: 15rpx;
}

.contact-input {
  width: 100%;
  height: 80rpx;
  padding: 0 20rpx;
  border: 2rpx solid #FFE6CC;
  border-radius: 12rpx;
  font-size: 26rpx;
}

.history-list {
  border-top: 1rpx solid #FFE6CC;
}

.history-item {
  padding: 20rpx 0;
  border-bottom: 1rpx solid #FFE6CC;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.history-type {
  font-size: 24rpx;
  color: #FF8C42;
  background-color: #FFF0E0;
  padding: 5rpx 15rpx;
  border-radius: 15rpx;
}

.history-status {
  font-size: 22rpx;
  padding: 5rpx 12rpx;
  border-radius: 12rpx;
}

.history-status.replied {
  background-color: #E8F5E8;
  color: #4CAF50;
}

.history-status.processing {
  background-color: #FFF3CD;
  color: #856404;
}

.history-content {
  font-size: 26rpx;
  color: #333;
  line-height: 1.5;
  margin-bottom: 10rpx;
}

.history-time {
  font-size: 22rpx;
  color: #999;
  margin-bottom: 15rpx;
}

.history-reply {
  background-color: #FFF9F2;
  padding: 15rpx;
  border-radius: 8rpx;
  border-left: 3rpx solid #FF8C42;
}

.reply-label {
  font-size: 22rpx;
  color: #FF8C42;
  margin-bottom: 8rpx;
}

.reply-content {
  font-size: 24rpx;
  color: #666;
  line-height: 1.5;
}

.submit-section {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx;
  background-color: #fff;
  border-top: 1rpx solid #FFE6CC;
}

.submit-btn {
  width: 100%;
  height: 80rpx;
  background: linear-gradient(to right, #FF8C42, #FF9F1C);
  color: #fff;
  border: none;
  border-radius: 40rpx;
  font-size: 28rpx;
  box-shadow: 0 4rpx 12rpx rgba(255, 140, 66, 0.3);
}

.submit-btn:disabled {
  background: #ccc;
  box-shadow: none;
}
</style>